<script lang="ts" setup>
  import { ref, toRefs } from 'vue'
  import { getOrderLog } from '@/api/order'
  import { HMessageBox } from '@/components/common/message'

  interface OperationLog {
    content: string
    createEmp: string
    createTime: string
    event: string
    id: string
    images: Array<string>
    name: string
    type: string
  }

  const props = defineProps({
    workId: {
      type: String,
      required: true,
    },
  })
  const color = ['#007cff', '#a06eff', '#00c0c0', '#e69103']
  const colorBg = ['back_c4', 'back_c3', 'back_c2', 'back_c1']
  const { workId } = toRefs(props)
  const activeList = ref<Array<OperationLog>>([]) // 操作日志数据
  const total = ref(0)
  let pageSize = ref(10)
  let currentPage = ref(1)

  // 获取记录列表加载
  const getListLoading = ref(false)

  /**
   * 获取列表方法
   * @param page - 当前页数
   */
  const getList = async (page: number) => {
    try {
      getListLoading.value = true
      currentPage.value = page
      let data = {
        limit: pageSize.value,
        page: page,
      }
      const res = await getOrderLog(data, workId.value)
      getListLoading.value = false
      if (res.data.success) {
        activeList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
      } else {
        HMessageBox.error(res.data.message)
      }
    } catch (error) {
      getListLoading.value = false
    }
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div v-loading="getListLoading" class="ul_timeline">
    <div class="content">
      <el-timeline class="first_pane">
        <el-timeline-item
          v-for="(activity, index) in activeList"
          :key="index"
          class="box-card"
          :color="color[index % 4]"
          :timestamp="activity.createTime"
          placement="top"
        >
          <el-card>
            <template #header>
              <div class="card-header">
                <h4>{{ activity.name }}</h4>
                <div class="c_network" :class="colorBg[index % 4]">
                  {{ '【' + activity.type + '】 ' + activity.createEmp + ' ' + activity.event }}
                </div>
              </div>
            </template>
            <div class="c_note">{{ activity.content }}</div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="pagination_container">
      <div v-if="total > 0 && total <= 10" class="page_bo">共{{ total }}条</div>
      <el-pagination
        :pager-count="5"
        class="page_bo"
        hide-on-single-page
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  :deep(.el-card__header) {
    padding: 10px 0;
    margin: 0 10px;
  }

  :deep(.el-card__body) {
    padding: 0 10px;
    font-size: 12px;
  }

  :deep(.el-card) {
    border: none;
    width: 99%;
    border-radius: 0;

    &.is-always-shadow {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
    }
  }

  .ul_timeline {
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
      max-height: calc(100% - 28px);
      overflow: auto;
    }

    .pagination_container {
      :deep(.el-pagination) {
        margin: 0;
      }
    }
  }

  .box-card {
    padding-bottom: 20px;

    .back_c1 {
      background-color: #f5eee3;
      color: #e69103;
    }

    .back_c2 {
      background-color: #d2f7f7;
      color: #00c0c0;
    }

    .back_c3 {
      background-color: #eee9fa;
      color: #a06eff;
    }

    .back_c4 {
      background-color: #e4eef8;
      color: #007cff;
    }

    .c_network {
      padding: 4px 5px;
      display: inline-block;
      font-size: 12px;
    }

    .c_note {
      color: #999;
      margin: 8px 0;
    }

    :deep(.el-timeline-item__node--normal) {
      left: 0;
    }

    :deep(.el-timeline-item__tail) {
      left: 5px;
    }

    :deep(.el-timeline-item__wrapper) {
      padding-left: 20px;
      top: -5px;
    }
  }

  .page_bo {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    color: #999;
    font-size: 12px;
  }
</style>
